<script setup lang="ts"></script>

<template>
  <main class="main-wrap flex-h-cc" v-hl>
    <h1>咔咖科技传媒学院</h1>
  </main>
</template>

<style scoped lang="scss">
.main-wrap {
  @include size(100%, 100%);
  padding: 24px;
  overflow-y: auto;
  background: #f1f9f9;
  h1 {
    position: relative;
    font-size: 80px;
    color: #7c8577;
    font-weight: bold;
    opacity: 0;
    margin: 0;
    -webkit-text-stroke: 1px #ffc20e;
    transform: translateY(-50px);
    animation: show 2s ease-in-out 0.5s 1 forwards;
    &::before {
      position: absolute;
      /* 这里必须是Unicode编码 */
      /* 注意：转换完毕去掉\后面的U */
      content: '\5494\5496\79d1\6280\4f20\5a92\5b66\9662';
      background-image: linear-gradient(
        to right,
        #bed742,
        #f8aba6,
        #585eaa,
        #ed1941,
        #7fb80e,
        #f26522,
        #ffc20e,
        #7c8577,
        #009ad6,
        #65c294,
        #f47920,
        #f15b6c,
        #2e3a1f
      );
      color: transparent;
      font-weight: bold;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-stroke: 1px #ffc20e;
      clip-path: polygon(-20% 0%, 0% 0%, -10% 100%, -30% 100%);
      animation: light 2s 2s infinite;
    }
  }
}
@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes light {
  0% {
    clip-path: polygon(-20% 0%, 0% 0%, -10% 100%, -30% 100%);
  }
  50% {
    clip-path: polygon(100% 0%, 120% 0%, 110% 100%, 90% 100%);
  }
  100% {
    clip-path: polygon(-20% 0%, 0% 0%, -10% 100%, -30% 100%);
  }
}
</style>
